<template>
	<view class="flex-col page">
		<view class="flex-col group">
			<view class="flex-row" @click="go('/pages/index/check/checkProgress?source=tool')">
				<text class="text_1">查看各期巡检</text>
				<view class="flex-row" style="margin-left:65%;">
					<u-icon name="arrow-right" color="#c3c4c6" size="28"></u-icon>
				</view>

			</view>
			<view class="flex-col line-tabs">
				<view class="flex-col section_1">
					<view class="justify-center group_1">
						<view class="item" @click="setIndex(0)">
							<text class="text_2">全部</text>
							<view v-if="index==0" class="section_2">
								<!--*-->
							</view>
						</view>
						<view class="item" @click="setIndex(1)">
							<text class="text_2">待整改</text>
							<view v-if="index==1" class="section_2">
								<!--*-->
							</view>
						</view>
						<view class="item" @click="setIndex(2)">
							<text class="text_2">已整改</text>
							<view v-if="index==2" class="section_2">
								<!--*-->
							</view>
						</view>

					</view>

				</view>
				<view class="flex-col list" v-if="list.length>0">

					<template v-for="(item, i) in list">
						<view class="flex-col list-item"
							@click="go('/pages/index/check/inspectiondetail?issueId='+item.issueId)" :key="i">

							<view class="flex-row justify-between">
								<text class="text_5">{{item.issueTypeName}}</text>
								<text class="text_7">{{item.rectificationStatus}}</text>
							</view>
							<text class="text_9">{{item.issueContent}}</text>

							<view class="comments" v-if="item.comments.length>0">
								<u-icon class="fan" color="#EBF1FE" name="arrow-up-fill"></u-icon>

								<view class="flex-col">
									<view class="" v-for="(it,i) in item.comments" :key="i">
										<view class="u-flex">
											<text class="username">{{it.userName}}</text> <text
												class="job">{{it.userRoleName==104?'工长':'巡检'}}</text>
										</view>
										<view class="desc">
											<text>{{it.responseContent}}</text>
										</view>
										<view class="flex-row equal-division u-flex-wrap"
											style="width: 100%; height: 100rpx; ">

											<image v-for="(it,i) in item.pic" :key="i" :src="it"
												class="equal-division-item" />
											<text class="text_11">{{item.insertTime}}</text>
										</view>
										<view class="u-flex u-row-between u-flex-wrap">
											<image v-for="(it2,ii2) in it.responseImg" :key="ii2" class="comment-pic"
												:src="it2" mode=""></image>

										</view>
									</view>


								</view>
							</view>


						</view>

					</template>
				</view>
				<view class="" v-else>
					<u-empty mode="data" width="250" marginTop="50%" textSize="30rpx"
						icon="http://cdn.uviewui.com/uview/empty/list.png">
					</u-empty>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				list: [],
				index: 0,
				family: {},
				status: [0, 1, 3]
			};
		},
		created() {
			this.getFamily()
			this.getList();
		},
		methods: {
			getFamily() {
				this.$http('lhouse.query').then(r => {
					if (r.code == 200) {
						this.family = r.data.project;
					}
				});
			},
			setIndex(index) {
				this.index = index;
				this.getList()
			},
			getList() {
				this.$http('check.queryIssuesByUtil', {
					rectificationStatus: this.status[this.index],
					pageSize: 10,
					pageNum: 1
				}).then(r => {
					if (r.code == 200) {

						r.data.forEach(item => {
							if (item.issueMedia) {
								item.pic = item.issueMedia.split(',')
							} else {
								item.pic = [];
							}
							item.comments.forEach(it => {
								if (it.responseImg) {
									it.responseImg = it.responseImg.split('')
								} else {
									it.responseImg = []
								}
							})
						});


						r.data.forEach(item => {
							if (item.issueMedia) {
								item.pic = item.issueMedia.split(',')
							} else {
								item.pic = [];
							}
						});
						this.list = r.data;

					}

				});
			}
		},
	};
</script>

<style scoped lang="scss">
	.list-item {
		padding: 20rpx 23rpx 34rpx 24rpx;
		background-color: #ffffff;
		border-radius: 0px 0px 16rpx 16rpx;
		margin-top: 20rpx;
	}

	.comments {
		margin-top: 30rpx;
		width: 654rpx;
		/* height: 395rpx; */
		padding: 24rpx;
		background: rgba(29, 106, 255, 0.08);

		border-radius: 16rpx 16rpx 16rpx 16rpx;

		position: relative;
		z-index: 111;
	}

	.comment-pic {
		width: 38rpx;
		height: 40rpx;
		border-radius: 16rpx;
	}

	.fan {

		position: absolute;
		left: 100rpx;
		top: -10px;

		z-index: 0;

	}

	.username {
		font-size: 26rpx;
		font-weight: 500;
	}

	.job {
		margin-left: 20rpx;
		color: #829BC6;
		font-size: 20rpx;
		border: 1px solid #829BC6;
		padding: 0rpx 10rpx;
		border-radius: 30rpx;
	}

	.desc {
		color: #333333;
		font-size: 26rpx;
		margin-top: 20rpx;
	}

	.text_9 {
		margin-top: 24rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.item {
		display: flex;
		flex-direction: column;
		flex: 1;
		align-items: center;
	}

	.equal-division {
		margin-top: 33rpx;
	}

	.text_11 {
		margin-left: -210rpx;
		margin-top: 230rpx;
		align-self: flex-start;
		color: #666666;
		font-size: 24rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 28rpx;
	}

	.text_5 {
		color: #191919;
		font-size: 32rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 38rpx;
	}

	.text_7 {
		margin-top: 4rpx;
		color: #ff371d;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.equal-division-item {

		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
		margin-right: 10rpx;
	}

	page {
		background-color: #f6f7f9ff;
	}

	.page {
		background-color: #f6f7f9ff;
		width: 100%;
		overflow-y: auto;
		overflow-x: hidden;
		height: 100vh;
	}

	.group {
		padding-top: 30rpx;
		flex: 1 1 auto;
		overflow-y: auto;
	}

	.text_1 {
		margin-left: 32rpx;
		align-self: flex-start;
		color: #191919;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';
		line-height: 33rpx;
	}

	.line-tabs {
		margin-top: 33rpx;
	}

	.section_1 {
		margin: 0 24rpx;
		padding: 0 89rpx 9rpx 100rpx;
		background-color: #ffffff;
		border-radius: 16rpx 16rpx 0px 0px;
		border-bottom: solid 1rpx #eeeeee;
	}

	.list {
		padding: 0 24rpx 48rpx;
	}

	.group_1 {
		padding: 30rpx 0 25rpx;
		position: relative;
	}

	.section_2 {
		margin-top: 6rpx;
		background-color: #1d6aff;
		border-radius: 4rpx;
		width: 60rpx;
		height: 8rpx;
	}

	.text_2 {
		color: #333333;
		font-size: 28rpx;
		font-family: '.AppleSystemUIFont';

	}

	.equal-division-item_1 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}

	.equal-division-item_2 {
		margin-left: 15rpx;
		flex: 1 1 208rpx;
		border-radius: 16rpx;
		width: 208rpx;
		height: 208rpx;
	}
</style>
